<template>
  <div class="details">
    <div class="nav-bar-wrap">
       <van-nav-bar title="预约会议" left-arrow @click-left="onClickLeft" @click-right="ok">
      <van-icon name="more-o" slot="right" />
     </van-nav-bar>
    </div>
    <div class="box">
      <div class="wrap">
      <van-cell-group class="cell-group">
        <van-cell class="cell-item">
          <template slot="title">
            <span class="title-color">会议名称</span>
            <div class="van-cell__label">发起人：周珊</div>
          </template>
          <div class="avatar">周期</div>
        </van-cell>
        <van-cell title="云会议号:" label="2018-05-22 周二 10:00-00:00">
        </van-cell>
        <van-cell class="detail-item">
          <div> 会议带宽:</div>
          <div>128bps</div>
          <p>会议详情:</p>
          <p>1.xxxxxxxxx。2:xxxxxx</p>
          <p>参会人员:</p>
          <p>张三,李四，王五.....</p>
        </van-cell>
      </van-cell-group>
     </div>
    </div>
    <van-actionsheet v-model="show" :actions="actions" />
  </div>
</template>

<script>
import { Cell, CellGroup, NavBar, Icon, Actionsheet } from 'vant'
export default {
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [Actionsheet.name]: Actionsheet
  },
  data() {
    return {
      show: false,
      actions: [
        {
          name: '编辑',
          callback: this.edit,
          className: 'defalt'
        },
        {
          name: '分享',
          callback: this.share,
          className: 'defalt'
        },
        {
          name: '取消预约',
          callback: this.cancel,
          className: 'warn'
        },
        {
          name: '删除',
          callback: this.delete,
          className: 'warn'
        }
      ]
    }
  },
  methods: {
    cancel(){

    },
    delete(){

    },
    share(){

    },
    edit(){

    },
    onClickLeft() {
      this.$router.push('home')
    },
    ok() {
      this.show = true
    }
  },
  mounted(){
    let params = this.$route.params
    console.log(params)
  }
}
</script>

<style scoped lang='less'>
.details {
  // padding: 0px 10px;
  .cell-group{
  }
  .cell-item{
    border-radius:20px; 
  }
  .detail-item{
    font-size: 14px;
    color: #4A4A4A;
  }
  .title-color {
    color: #3580e7;
  }
  .box{
    padding: 0px 15px 10px 15px;
  }
  .wrap {
    margin-top:77px;
    -moz-box-shadow: 5px 5px 16px #333333;
    -webkit-box-shadow: 5px 5px 16px #333333;
    box-shadow: 5px 5px 16px #333333;
  }
  .avatar {
    text-align: center;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    background: #3580e7;
    float: right;
  }
}
</style>